<!-- 想定描述页面 -->
<template>
    <div class="experiment-detail-container">
        <div class="experiment-detail-content">
            <div class="s-info">
                <div class="s-info__statistics">
                    <div class="s-info__statistics_title">
                        想定统计
                    </div>

                    <div class="s-info__statistics_content">
                        <div class="s-info__statistics_item">
                            <div class="s-info__statistics_item_num">5/10</div>
                            <div class="s-info__statistics_item_name">可用/基础想定数量</div>
                        </div>
                        <div class="s-info__statistics_item">
                            <div class="s-info__statistics_item_num">99/100</div>
                            <div class="s-info__statistics_item_name">生效/生成想定数量</div>
                        </div>
                        <div class="s-info__statistics_item">
                            <div class="s-info__statistics_item_num">部分错误</div>
                            <div class="s-info__statistics_item_name">生成状态</div>
                        </div>
                    </div>
                </div>
                <div class="s-info__experiment">
                    <div class="s-info__experiment_title">
                        试验信息
                    </div>
                    <div class="s-info__experiment_content">

                        <div class="s-info__experiment_item">
                            <div class="s-info__experiment_item_num">{{ form.experimentName }}</div>
                            <div class="s-info__experiment_item_name">
                                {{ $t("tool.experimentDesign.experimentName") }}</div>
                        </div>

                        <div class="s-info__experiment_item">
                            <div class="s-info__experiment_item_num">{{ form.experimentDifficulty }}</div>
                            <div class="s-info__experiment_item_name">
                                {{ $t("tool.experimentDesign.experimentDifficulty") }}</div>
                        </div>

                        <div class="s-info__experiment_item">
                            <div class="s-info__experiment_item_num">{{ form.createTime }}</div>
                            <div class="s-info__experiment_item_name">{{ $t("tool.experimentDesign.createTime")
                                }}
                            </div>
                        </div>
                        <div class="s-info__experiment_item">
                            <div class="s-info__experiment_item_word">{{ form.experimentDescribe || '暂无描述' }}</div>
                            <div class="s-info__experiment_item_name">
                                {{ $t("tool.experimentDesign.experimentDescribe") }}</div>
                        </div>


                    </div>
                    <el-button class="jtyj-btn-primary" @click="enterExperiment">{{
                        $t("tool.experimentDesign.enter") }}</el-button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        const basePathUrl = window.basePathUrl || ''
        return {
            configUrl: basePathUrl + '/config/map.json',
            configOptions: {
                "control": {
                    "homeButton": false,
                    "sceneModePicker": false,
                    "contextmenu": {
                        "enabled": false,
                    },
                    "zoom": {
                        "enabled": false,
                    },
                    "mouseDownView": false,
                    "locationBar": {
                        "enabled": false,
                    }
                },
            },
            subjectOptions: [{
                value: '科目一',
                label: '科目一'
            }, {
                value: '科目二',
                label: '科目二'
            }],
            difficultyOptions: [{
                value: '容易',
                label: '容易'
            }, {
                value: '中等',
                label: '中等'
            }, {
                value: '困难',
                label: '困难'
            }],
            form: {
                experimentName: 11,
                experimentDifficulty: '容易',
                experimentDescribe: '描述',
                subject: '科目一',
                createTime: '2021-05-01',
                id: 1
            },
            selectedNodeInfo: {}, // 当前选中节点的信息
            scenarioDataList: [], // 想定数据列表
        }
    },
    components: {
    },
    props: {
        nodeInfo: {
            type: Object,
        }
    },

    mounted() {
        // this.form = this.nodeInfo.data;
    },

    methods: {
        submitForm() { },
        enterExperiment() {
            this.$router.push({ name: "experimentBuild", query: { experimentId: this.nodeInfo.id } })
        },
    }
}

</script>

<style lang="scss" scoped>
.experiment-detail-container {
    width: 100%;
    height: 65%;

    .experiment-detail-content {
        width: 100%;
        height: 85%;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        margin-top: 20px;

        .s-info {
            width: 80%;

            .s-info__statistics {
                border-radius: 5px;
                padding: 10px 20px;
                background-color: var(--ui-component-background-alt);
                margin-bottom: 30px;

                .s-info__statistics_title {
                    font-size: var(--ui-font-size-base);
                }

                .s-info__statistics_content {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 20px;

                    .s-info__statistics_item {
                        .s-info__statistics_item_num {
                            font-size: var(--ui-font-size-title);
                        }

                        .s-info__statistics_item_name {
                            font-size: var(--ui-font-size-sm);
                            color: var(--app-text-fg-low);
                            margin-top: 10px;

                        }
                    }
                }

            }

            .s-info__experiment {
                border-radius: 5px;
                background-color: var(--ui-component-background-alt);
                padding: 10px 20px;

                .s-info__experiment_title {
                    font-size: var(--ui-font-size-base);
                }

                .s-info__experiment_content {
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    .s-info__experiment_item {
                        .s-info__experiment_item_num {
                            font-size: var(--ui-font-size-base);
                        }
                        .s-info__experiment_item_word {
                            font-size: var(--ui-font-size-base);
                            color: var(--app-text-fg-low);
                        }

                        .s-info__experiment_item_name {
                            font-size: var(--ui-font-size-sm);
                            color: var(--app-text-fg-low);
                            margin-top: 5px;
                            margin-bottom: 20px;

                        }
                    }

                    & :last-child {
                        width: 100%;
                    }
                }
            }

            .jtyj-input {
                width: 100%;
            }

        }
    }
}
</style>